<!-- Modal -->
			<div class="modal fade" id="category-holder" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			  <div class="modal-dialog">
				<div class="modal-content">
				  <div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
					<h4 class="modal-title" id="myModalLabel">Add A Category</h4>
				  </div>
				  <div class="modal-body">
						<div class="input-group">
							<span class="input-group-addon">Category Name:</span>
							<input type="text" name='category_name' class="form-control form-input-over" placeholder="Category Name" />
						</div>
				  </div>
				  <div class="modal-footer">
					<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
					<button type="button" id='save_categories' class="btn btn-primary">Save</button>
				  </div>
				</div>
			  </div>
			</div>
<!--- end modal --->		
	
	<div id="page-wrapper">
		<div class="row">
		
			<?php echo  form_open_multipart('services/add_office_services'); ?>
					<h3> Please set up your company Services Now! <button type='submit' class='btn btn-primary'><span class='glyphicon glyphicon-saved'></span> SAVE COMPANY</button></h3> 
				<div id='compserve' class="panel panel-default">
					  <div class="panel-heading">
						<h3 class="panel-title">COMPANY SERVICES</h3>
					  </div>
					  <div class="panel-body">
					
					   <h4>Office Service Categories:</h4>
					
				
					<div class="input-group">
					   <span class="input-group-addon">Category 1:</span>
					   
					   <select data-placeholder="Type or Search Categories Here"  name='categories[]' id='categories' class="form-control form-input-reg" multiple class="chosen-select-no-results" tabindex="11">
							<?php if($categories == false): ?>
								<?php  ?>
							<?php else: ?>
								<?php foreach($categories as $list): ?>
									<option value='<?php echo $list->id; ?>'><?php echo $list->category_name; ?></option>
								<?php endforeach; ?>
							<?php endif; ?>
					  </select>
					  <button type='button' id='add-category' class='btn btn-primary add-category'><span class='glyphicon glyphicon-plus'></span></button>
					</div>
					
					<div class="input-group">
					   <span class="input-group-addon">Sales Contact  Email address:</span><input type="text" name='sales_contact_email' class="form-control form-input-reg" placeholder="Sales Contact  Email address" />
					</div>
					
					<div class="input-group">
					   <span class="input-group-addon">Sales Contact Phone #1:</span><input type="text" name='sales_contact_phone1' class="form-control form-input-reg" placeholder="Sales Contact One" />
					</div>
					
					<div class="input-group">
					   <span class="input-group-addon">Sales Contact Phone #2:</span><input type="text" name='sales_contact_phone2' class="form-control form-input-reg" placeholder="Sales Contact Person 2" />
					</div>
					
					<div class="input-group">
					   <span class="input-group-addon">Add another Office?:</span><table><tr class="on_off"><td><input type="checkbox" name='add_other_office' id="add_other_office" /> </td></tr> </table>
					</div>
					
					  </div>
				</div>
					<h3> Please set up your company Services Now! <button type='submit' class='btn btn-primary'><span class='glyphicon glyphicon-saved'></span> SAVE COMPANY</button></h3> 
			
			<?php echo form_close(); ?>
		
		
                </div>
                <!-- /.col-lg-12 -->

            </div>
            <!-- /.row -->
        </div>
        <!-- /#page-wrapper -->
		<script type='text/javascript'>
			$(function(){
				 $('#categories').chosen({disable_search_threshold: 10,width:"40%"});
			});
			$('#add-category').click(function(){
				
				$('#category-holder').modal('show');
			
			});
			
			$('#save_categories').click(function(){
				$.ajax({
					type:'post',
					url:"<?php echo site_url('ajax/addnew_categories'); ?>",
					data:'category='+$('[name=category_name]').val(),
					success:function(data){
						if(data == 0){
							alert("Please enter a Category Name!");
						}
						else{
							var json = JSON.parse(data);
							$('#categories').append('<option value="'+json.id+'" selected>'+json.category_name+'</option>');
							$('#categories').trigger('chosen:updated');
							$('[name=category_name]').val("");
							$('#category-holder').modal('hide');
						}
					}
				});
			});
		</script>